<template>
	<view class="orderProductList">
		<view class="order-body" @click="toProductDetail(product.shopId)">
			<view class="product-image">
				<image
				mode="aspectFill" :src="product.image" alt="" />
			</view>
			<view class="product-info">
			<!-- <view v-for="(item,index) in  product" :key="index" class="product-info"> -->
				<view class="product-info-top">
					<view class="product-name">
						{{ product.title }}
					</view>
					<view class="product-base-info">
						<view>
							<view class="selling-price">
								{{ product.price }}
							</view>
							<view class="order-num">
								x{{ product.num }}
							</view>
						</view>
					</view>
				</view>
				<view class="product-info-bottom">
					<!-- 12 + 256GB -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props: {
			product: {
				type: Object,
				default: function() {
					return {};
				}
			}
		},
		created() {

		},
		methods: {
			toProductDetail(shop_id) {
				uni.navigateTo({
					url: '/pages/productDetail/productDetail?id=' + shop_id
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.orderProductList {
		.order-body {
			box-sizing: border-box;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			background: #F6F6F6;
			padding: 10rpx 20rpx;
			margin: 20rpx 0px;
			border-radius: 12rpx;

			.product-image {
				width: 160rpx;
				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 12rpx;
				}
			}

			.product-info {
				width: calc(100% - 160rpx);

				.product-info-top {
					display: flex;
					font-size: 26rpx;

					.product-name {
						box-sizing: border-box;
						width: calc(100% - 100px);
						padding: 0px 10px;
						overflow: hidden;
						display: -webkit-box;
						-webkit-line-clamp: 2;
						-webkit-box-orient: vertical;
						word-break: break-all;
					}

					.product-base-info {
						width: 100px;
						text-align: right;

						.selling-price {
							color: #E01717;
						}

						.order-num {
							color: #9F9F9F;
							font-size: 22rpx;
						}
					}
				}

				.product-info-bottom {
					width: 100%;
					text-align: right;
					color: #ED762F;
					margin-top: 10px;
				}
			}
		}
	}
</style>